<template>
    <div class="sass-demo">
        <div class="header">
            <ul class="nav">
                <li>
                    <a>nav_01</a>
                    <ul class="subNav">
                        <li>sub_01</li>
                        <li>sub_02</li>
                        <li>sub_03</li>
                        <li>sub_04</li>
                    </ul>
                </li>

                <li><a>nav_02</a></li>
                <li><a>nav_03</a></li>
                <li><a>nav_04</a></li>
                <li><a>nav_05</a></li>
                <li><a>nav_06</a></li>
            </ul>
            <div class="searchBar">
                <input type="text" class="search">
                <a href="javascript:;" class="searchBtn"></a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "SassDemo"
}
</script>

<style lang="scss" scoped>
$grey: #CCCCCC;
$warm: #FFCCCC;
$cool: #99CCCC;
$hot: #f00;

$typeArea: 1226px;
$side: left;


// 函数  pxTorem   100px => 1rem  
// pxTorem(750px) => 7.5rem
@function pxTorem($val) {
    // @return #{calc($val/100px)}rem;
    @return calc($val/100px)*1rem;
}




body {
    font: normal normal 14px / 18px "微软雅黑";
}

.header {
    width: $typeArea;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    // 在属性值中使用变量  => sass编译为css是 会被解析为对应的值
    background-color: $grey;
    // 在选择器 css属性名 css属性值中拼接变量  => 插值语句
    border-#{$side}: 0;

    // 嵌套语法  => sass允许在css的{}中使用嵌套语法
    // 在sass文件解析为css的过程中,会解析嵌套语法, 在被嵌套的自选择器前 添加父选择器(用空格分隔 => 默认解析为 包含选择器)  一般情况下，sass在解开一个嵌套规则时就会把父选择器（#content）通过一个空格连接到子选择器的前边
    .nav {
        float: left;

        //  // & 父选择器标识符  => 当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：
        // & => .header .nav
        // &>li => .header .nav>li
        &>li {
            height: 40px;
            box-sizing: border-box;
            float: left;
            padding: 0 20px;
            border: 1px solid #999;
            position: relative;

            .subNav {
                width: 200px;
                background-color: $cool;
                text-indent: 20px;
                position: absolute;
                left: 0;
                top: 40px;
                color: #333;
                display: none;
            }

            // & 父选择器标识符  => 当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：
            // &  => .header .nav li
            // &:hover =>  .header .nav li:hover
            &:hover {
                background-color: #6ff;
                color: #fff;

                .subNav {
                    display: block;
                }
            }
        }

        li+li {
            border-left: 0;
        }

    }

    .searchBar {
        float: right;
        margin-right: 10px;
        border: 1px solid #999;
        margin-top: 3px;
        border-radius: 3px;
        overflow: hidden;

        .search {
            width: 200px;
            height: 32px;
            float: left;
            outline: none;
            border: 0;
        }

        .searchBtn {
            display: block;
            width: 32px;
            height: 32px;
            background-color: $cool;
            float: right;
        }
    }
}
</style>